<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
</head>

<body>
    <h1>文字环绕图片</h1>
    <div class="image-container">
        <img src="./images/Graygoo.jpg" alt="" width="75%">
        <div class="text-content">
            <p>加入你们？加入你们！？你要我自己投入某个初次见面的陌生外星人的怀抱？我真的......我简直......等等，让我把话说清楚......你们真的以为我会向你宣誓效忠，尽管我对你那诡异的帝国或者是其肮脏的历史一无所知？你没开玩笑吧？你居然会提出这种提议，我真不知道你在想......呃......其实......转念一想......好吧，何不呢？让我入伙吧。不，不，我是说真的！我感觉我们会很合得来，而且这将会是一段激动人心的大冒险。在此我宣布在接下来的2000年里效忠于你，不，还是5000年吧！
            </p>
        </div>
    </div>

    <div style="clear: both;"></div>
    <h1>行元素环绕浮动元素</h1>
    <div>

        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <img class="float" src="./images/64.png">
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="front ele">前</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
        <span class="back ele">后</span>
    </div>
    <div style="clear: both;"></div>
    <h1>浮动应用于居左居右</h1>
    <div class="xiyouji">
        <a href="">上一章</a>
        西游记
        <a href="">下一章</a>
    </div>
    <h1>浮动应用于列表排列</h1>
    <div class="liebiao">
        <div class="left"><img src="./images/女孩.png" alt=""></div>
        <div class="right"><img src="./images/商品.png" alt=""></div>
    </div>
    <style>
        body {
            width: 950px;
            height: 500px;
            margin: auto;

        }

        .image-container {
            width: 500px;
            margin: auto;
        }

        .image-container img {
            float: left;
            margin-right: 20px;
        }

        .text-content {
            margin-top: 0;
            shape-outside: margin-box;
            font-size: 20px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        .ele {
            display: inline-block;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            border: 2px gray solid;
            width: 50px;
            height: 50px;
            overflow: hidden;
            color: white;
            font-size: 20px;


            /*把前后内联元素的共性设在这里*/
        }

        .float {
            width: 100px;
            height: 100px;
            position: relative;
            float: left;
        }

        .front {
            float: left;
            background-color: #66CCFF;
        }

        .back {
            float: left;
            background-color: #39C5BB;
        }

        .xiyouji {
            text-align: center;
            width: 50%;
            margin: auto;
        }

        .xiyouji a:first-child {
            float: left;
            text-decoration: none;
            color:#66CCFF ;
        }

        .xiyouji a:last-child {
            float: right;
            text-decoration: none;
            color: #39C5BB;
        }
        .liebiao{display: inline-block;}
        .left{float: left;}
        .right{float: left;}
    </style>




</body>

</html>